<template>
  <div id="app">
    <h1>这是 App 根组件</h1>

    <hr />

    <my-test2 :ulist="userlist">
      <!-- <h5>这是通过插槽渲染的内容</h5> -->
      <!-- 通过作用域插槽，拿到的 scope 数据对象，是组件封装者，通过 v-bind 属性绑定，为我们提供的 -->
      <!-- <div slot-scope="scope">id的值为：{{scope.row.id}} --- name的值为：{{scope.row.name}}</div> -->
      <!-- <div v-slot="scope">id的值为：{{scope.row.id}} --- name的值为：{{scope.row.name}}</div> -->
      <template v-slot="scope">
        <div>id的值为：{{scope.row.id}} --- name的值为：{{scope.row.name}}</div>
      </template>
    </my-test2>
  </div>
</template>

<script>
import Test2 from './test/Test2.vue'

export default {
  name: 'app',
  data() {
    return {
      userlist: [
        { id: 1, name: '吕超', age: 88 },
        { id: 2, name: '老李', age: 18 },
        { id: 3, name: '大黄', age: 20 }
      ]
    }
  },
  methods: {},
  components: {
    'my-test2': Test2
  }
}
</script>

<style scoped>
</style>
